﻿<script type="text/javascript">
    $(document).ready(function () {

        var element = $('#list a');
        var offset = 0;
        var stepping = 0.01;
        var list = $('#list');
        var $list = $(list)

        $list.mousemove(function (e) {
            var leftOfList = $list.eq(0).offset().left;
            var listWidth = $list.width();
            stepping = ((e.clientX - leftOfList) / listWidth * 0.2 - 0.1) * 0.2;

        });


        for (var i = element.length - 1; i >= 0; i--) {
            element[i].elemAngle = i * Math.PI * 2 / element.length;
        }


        setInterval(render, 20);


        function render() {
            for (var i = element.length - 1; i >= 0; i--) {

                var angle = element[i].elemAngle + offset;

                x = 120 + Math.sin(angle) * 30;
                y = 45 + Math.cos(angle) * 40;
                size = Math.round(40 - Math.sin(angle) * 40);

                var elementCenter = $(element[i]).width() / 2;

                if (size == 80)
                    $(element[i]).css("color", "blue");
                else
                    $(element[i]).css("color", "#6E8BFF");

                $(element[i]).css("fontSize", size + "px");
                $(element[i]).css("opacity", size / 100);
                $(element[i]).css("zIndex", size);
                $(element[i]).css("right", y + "%");
            }

            offset += stepping;
        }


    });
</script>
<h2>@ViewBag.NewMem</h2>
<hr />
<div class="ui-corner-all ui-widget-content" style="min-height:200px">
@foreach (var m in ViewBag.Members)
{
    <span class="avt-wrapper"><a href="/@m.UserName/Home"><img height="80" width="70" src="@m.Avatar" alt="avatar" title="@m.DisplayName" /></a></span>
}
</div>
<h2>@ViewBag.NewGroup</h2>
<hr />
<div class="ui-corner-all ui-widget-content" style="min-height:200px">
@foreach (var g in ViewBag.Groups)
{
    <span class="avt-wrapper"><a href="/Group/Home/@g.GId"><img height="80" width="70" src="@g.Avatar" alt="avatar" title="@g.GName" /></a></span>
}
</div>
<h2>@ViewBag.NewFolder</h2>
<hr />
<div class="ui-corner-all ui-widget-content" style="min-height:200px">
@foreach (var f in ViewBag.Folders)
{
    <span class="avt-wrapper"><a href="/Collection/View/@f.FId"><img height="80" width="70" src="@f.FThumb" alt="avatar" title="@f.FName" /></a></span>
}
</div>  
<h2>@ViewBag.NewCanvas</h2>
<hr />
<div class="ui-corner-all ui-widget-content" id="list">
    <ul>
@foreach (var c in ViewBag.Canvas)
{
        <li><a href="/Canvas/Room/@c.ID">@c.Title</a></li>
}
    </ul>
</div>  
